// mela onlie 购物车界面 订制
import { PureComponent } from "react";
import { Button, Modal,DatePicker, List,Checkbox,Tabs } from "antd-mobile"
import { connect } from 'dva';
import { InputItem } from 'antd-mobile';
import { handleImg, isNull, backToPrevious,goToPage,handleOSS } from "../../utils/helper";
import MToast from '../../components/Util/MToast';
import { routerRedux } from "dva/router";
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import "./PlaceOrder.less";
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
@connect(() => {
  return ({

  })
})
export default class Retail extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      date: now,
      greenCode:'',//输入的绿卡号
      cusName:'',//客户名称
      customer_rate_code:'',//税号
      birthday:'',//生日
      contact_way:'',//联系电话
      email:'',//邮箱
      checked:false,
      sureCode:false,//验证绿卡号
      sales_code:'',
      electronic_invoice_code:'',//电子发票接收代码
      registered_city:"",//城市编码
      registered_area:"",//行政区
      registered_country:"IT",//国家
      registered_street:"",//街道
      pec_email:"",//认证邮箱
      customer_rate_code:"",//税号
      contact:"",//联系人
      salesType:'',
      privacyModal:false,
      indexTitle:0
    }
  }
  componentWillMount() {
    let { dispatch, location } = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: T(localeData[localStorage.locale].retailTitle),
        path: location.pathname + location.search
      }
    });
    // let old_cart_address = localStorage.getItem(MI_APP_CODE + "old_cart_address");
    // if (!isNull(old_cart_address)) {
    //   localStorage.removeItem(MI_APP_CODE + "old_cart_address");
    //   old_cart_address = JSON.parse(old_cart_address);
    //   for (let i in old_cart_address) {
    //     this.setState({
    //       [i]: old_cart_address[i]
    //     })
    //   }
    // }
    const query = location.search;
    console.log(query)
    const arr = query.split('=') // ['?s=', 'f=7']
    console.log(arr)
    const salesType = arr[1];
    console.log(salesType)
    this.setState({
      salesType:salesType
    })
  }

  componentDidMount() {

  }

  retailSureClick = () => {
    let { greenCode,cusName, customer_rate_code, birthday,contact_way,
      email,date,sureCode,sales_type,electronic_invoice_code,
      registered_city,registered_area,registered_country,pec_email,contact,salesType, registered_street } = this.state;
    let { dispatch } = this.props;
    if(salesType=='T1'){
      if (isNull(greenCode)) {
        MToast.fail(T(localeData[localStorage.locale].greenCodeTitle1), 3, null, false);
        return;
      }
      if(!sureCode){
        MToast.fail(T(localeData[localStorage.locale].retailTitle1), 3, null, false);
        return;
      }
      if (isNull(cusName)) {
        MToast.fail(T(localeData[localStorage.locale].retailTitle3), 3, null, false);
        return;
      }
      if (!this.state.checked){
        MToast.fail(localeData[localStorage.locale].retailTitle21, 3, null, false);
        return;
      }
      dispatch({
        type: "form/query",
        payload: {
          apiInfo: {
            url: "/ent/create?_c=customer_bind",
            params: [
              {
                key: "sales_type",
                value: 1
              },
              {
                key: "customer_greencard",
                value: greenCode
              },
              {
                key: "name",
                value: cusName
              },
              {
                key: "customer_rate_code",
                value: customer_rate_code?customer_rate_code:' '
              },
              {
                key: "birthday",
                value: date?date:' '
              },
              {
                key: "contact_way",
                value: contact_way?contact_way:' '
              },
              {
                key: "email",
                value: email?email:" "
              },
            ],
            _c: "customer_bind"
          },
          callback: (result) => {
            let { data,code } = result;
            if(code==10200){
              // localStorage[MI_APP_CODE + "bindName"] = data.bind_name;
              goToPage({ dispatch, config: { url: "/my" }, })
            }
          }
        }
      })
    }
    else{
      if (isNull(greenCode)) {
        MToast.fail(T(localeData[localStorage.locale].greenCodeTitle1), 3, null, false);
        return;
      }
      if(!sureCode){
        MToast.fail(T(localeData[localStorage.locale].retailTitle1), 3, null, false);
        return;
      }
      if (isNull(cusName)) {
        MToast.fail(T(localeData[localStorage.locale].retailTitle3), 3, null, false);
        return;
      }
      if (!this.state.checked){
        MToast.fail(T(localeData[localStorage.locale].retailTitle23), 3, null, false);
        return;
      }
      if (isNull(electronic_invoice_code)) {
        MToast.fail(T(localeData[localStorage.locale].retailTitle10), 3, null, false);
        return;
      }
      if (isNull(registered_city)) {
        MToast.fail(T(localeData[localStorage.locale].retailTitle12), 3, null, false);
        return;
      }
      if (isNull(registered_area)) {
        MToast.fail(T(localeData[localStorage.locale].retailTitle13), 3, null, false);
        return;
      }
      if (isNull(registered_country)) {
        MToast.fail(T(localeData[localStorage.locale].retailTitle14), 3, null, false);
        return;
      }
      if (isNull(pec_email)) {
        MToast.fail(T(localeData[localStorage.locale].retailTitle15), 3, null, false);
        return;
      }
      // if (isNull(customer_rate_code)) {
      //   MToast.fail(T("请输入税号"), 3, null, false);
      //   return;
      // }
      // if (isNull(contact_way)) {
      //   MToast.fail(T("请输入联系方式"), 3, null, false);
      //   return;
      // }
      // if (isNull(contact)) {
      //   MToast.fail(T("请输入联系人"), 3, null, false);
      //   return;
      // }
      dispatch({
        type: "form/query",
        payload: {
          apiInfo: {
            url: "/ent/create?_c=customer_bind",
            params: [
              {
                key: "sales_type",
                value: 0
              },
              {
                key: "customer_greencard",
                value: greenCode
              },
              {
                key: "name",
                value: cusName
              },
              {
                key: "customer_rate_code",
                value: customer_rate_code?customer_rate_code:' '
              },
              {
                key: "electronic_invoice_code",
                value: electronic_invoice_code
              },
              {
                key: "contact_way",
                value: contact_way?contact_way:' '
              },
              {
                key: "registered_city",
                value: registered_city
              },
              {
                key: "registered_area",
                value: registered_area
              },
              {
                key: "registered_country",
                value: "IT"
              },
              {
                key: "registered_street",
                value:registered_street?registered_street:' '
              },

              {
                key: "pec_email",
                value: pec_email
              },
              {
                key: "contact",
                value: contact?contact:' '
              },
            ],
            _c: "customer_bind"
          },
          callback: (result) => {
            let { data,code } = result;
            if(code==10200){
              // localStorage[MI_APP_CODE + "bindName"] = data.bind_name;
              goToPage({ dispatch, config: { url: "/my" }, })
            }else{

            }

          }
        }
      })
    }


    // backToPrevious();
    // goToPage({ dispatch, config: { url: "/placeOrder" }, isReplace: false })
  }
  handleGreen=(value)=>{
    this.setState({
      greenCode:value
    })

  }
  greenClick=()=>{
    let { dispatch, location } = this.props;
    dispatch({
      type: "login/selectGreenCode",
      payload: {
        "customer_greencard":this.state.greenCode,
        "phone": localStorage[MI_APP_CODE + "phone"],
        callback: (result) => {
          let { data,code } = result;
          if (code == 10200) {
            // console.log("登陆成功");
            console.log(result)
           MToast.success(localeData[localStorage.locale].retailTitle21, 0.8);
            this.setState({
              sureCode:true,
              // customer_greencard:data.customer_greencard,
              // bindName:data.bind_name,
              // customer_id:data.customer_id,
              // phone:data.phone,
              // sales_type:data.sales_type

            })

          }else if(code == 10324){
            MToast.info(localeData[localStorage.locale].retailTitle20, 0.8);

          }
          // else if(code == 10345){
          //   MToast.info("绿卡号已绑定其他账号", 0.8);
          //
          // }
          // else if(code == 10803){
          //   MToast.info("验证码已失效", 0.8);
          //
          // }
          else{

          }
        }
      }
    });
  }
  onChangeBox=(e)=>{
    this.setState({
      checked:e.target.checked
    })
  }
  privacyCusClick=()=>{
    // let {dispatch}=this.props;
    // dispatch(routerRedux.push("/privacycus"))
    this.setState({
      privacyModal:true
    })
  }
  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }
  render() {
    let { greenCode,cusName, customer_rate_code, birthday,contact_way,email,date,sales_type,electronic_invoice_code,registered_city,
      registered_area,
      registered_country,
      pec_email,
      contact,salesType ,indexTitle,registered_street} = this.state;
    const messages = localeData[localStorage.locale];
    const tabs = [

      { title: <div><img src="image/Italy.png" style={{marginRight:'20px'}}/>IT</div>,sub:'0' },
      { title: <div><img src="image/china.png" style={{marginRight:'20px'}}/>中文</div>,sub:'1' },
    ];
    console.log(sales_type)
    return (
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
      <div className="normal" style={{ background: "#fff", height: "100%" }}>

        <div style={{padding:'4% 24px 40px'}}>
          {salesType=='T1'?<div>
            <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.greenCodeTitle}<span style={{color:'#F62447',fontSize:'13px'}}>&nbsp;*</span></p>
            <div style={{borderBottom:'1px solid #DDE3F1',overflow:'hidden'}}>
              <div  style={{width:'76%',float:"left"}}>
                <InputItem
                  clear
                  placeholder={messages.greenCodeTitle1}
                  value={greenCode}
                  onChange={(e) => {
                    this.setState({
                      greenCode: e
                    })
                  }}

                ></InputItem>
              </div>
              <div style={{width:'10%',float:"left"}}>
                <Button style={{width: '72px',
                  height: '29px',
                  lineHeight:'26px',
                  background: '#FF9F00',
                  borderRadius: '20px',color:'#fff',fontSize:'12px'}} onClick={this.greenClick}>{messages.retailTitle1}</Button>
              </div>

            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle2}<span style={{color:'#F62447',fontSize:'13px'}}>&nbsp;*</span></p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem

                  clear
                  placeholder={messages.retailTitle3}
                  value={cusName}
                  onChange={(e) => {
                    this.setState({
                      cusName: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle4}</p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem

                  clear
                  placeholder={messages.retailTitle5}
                  value={customer_rate_code}
                  onChange={(e) => {
                    this.setState({
                      customer_rate_code: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle6}</p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <DatePicker

                  mode="date"
                  title="Select Date"
                  extra="Optional"
                  value={this.state.date}
                  onChange={date => this.setState({ date })}
                >
                  <List.Item arrow="horizontal" style={{width:"100%"}}>data</List.Item>
                </DatePicker>
              </div>
            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle7}</p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem
                  maxLength="11"
                  type="money"
                  disabledKeys={['.']}
                  moneyKeyboardAlign="left"
                  clear
                  placeholder={messages.retailTitle71}
                  value={contact_way}
                  onChange={(e) => {
                    this.setState({
                      contact_way: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle8}</p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem

                  clear
                  placeholder={messages.retailTitle9}
                  value={email}
                  onChange={(e) => {
                    this.setState({
                      email: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
          </div>:<div>
            <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.greenCodeTitle}<span style={{color:'#F62447',fontSize:'13px'}}>&nbsp;*</span></p>
            <div style={{borderBottom:'1px solid #DDE3F1',overflow:'hidden'}}>
              <div  style={{width:'76%',float:"left"}}>
                <InputItem
                  clear
                  placeholder={messages.greenCodeTitle1}
                  value={greenCode}
                  onChange={(e) => {
                    this.setState({
                      greenCode: e
                    })
                  }}

                ></InputItem>
              </div>
              <div style={{width:'10%',float:"left"}}>
                <Button style={{width: '72px',
                  height: '29px',
                  lineHeight:'26px',
                  background: '#FF9F00',
                  borderRadius: '20px',color:'#fff',fontSize:'12px'}} onClick={this.greenClick}>{messages.retailTitle1}</Button>
              </div>

            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle2}<span style={{color:'#F62447',fontSize:'13px'}}>&nbsp;*</span></p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem

                  clear
                  placeholder={messages.retailTitle3}
                  value={cusName}
                  onChange={(e) => {
                    this.setState({
                      cusName: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle10}<span style={{color:'#F62447',fontSize:'13px'}}>&nbsp;*</span></p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem

                  clear
                  placeholder={messages.retailTitle11}
                  value={electronic_invoice_code}
                  onChange={(e) => {
                    this.setState({
                      electronic_invoice_code: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle12}<span style={{color:'#F62447',fontSize:'13px'}}>&nbsp;*</span></p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem

                  clear
                  placeholder={messages.retailTitle12}
                  value={registered_city}
                  onChange={(e) => {
                    this.setState({
                      registered_city: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle13}<span style={{color:'#F62447',fontSize:'13px'}}>&nbsp;*</span></p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem

                  clear
                  placeholder={messages.retailTitle13}
                  value={registered_area}
                  onChange={(e) => {
                    this.setState({
                      registered_area: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle14}<span style={{color:'#F62447',fontSize:'13px'}}>&nbsp;*</span></p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem
                  disabled
                  editable="false"
                  clear
                  placeholder={messages.retailTitle14}
                  value={registered_country}
                  onChange={(e) => {
                    this.setState({
                      registered_country: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>

            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle15}<span style={{color:'#F62447',fontSize:'13px'}}>&nbsp;*</span></p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem

                  clear
                  placeholder={messages.retailTitle16}
                  value={pec_email}
                  onChange={(e) => {
                    this.setState({
                      pec_email: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle4}</p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem

                  clear
                  placeholder={messages.retailTitle5}
                  value={customer_rate_code}
                  onChange={(e) => {
                    this.setState({
                      customer_rate_code: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle141}</p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem
                  editable="false"
                  clear
                  placeholder={messages.retailTitle141}
                  value={registered_street}
                  onChange={(e) => {
                    this.setState({
                      registered_street: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
            <div style={{padding:'16px 0px 0px'}}>
              <p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>{messages.retailTitle7}</p>
              <div style={{borderBottom:'1px solid #DDE3F1'}}>
                <InputItem
                  maxLength="11"
                  type="money"
                  disabledKeys={['.']}
                  moneyKeyboardAlign="left"
                  clear
                  placeholder={messages.retailTitle71}
                  value={contact_way}
                  onChange={(e) => {
                    this.setState({
                      contact_way: e
                    })
                  }}
                ></InputItem>
              </div>
            </div>
            {/*<div style={{padding:'16px 0px 0px'}}>*/}
              {/*<p style={{color:'#303133',fontSize:'13px',fontWeight:'bold',marginBottom:'6px'}}>联系人</p>*/}
              {/*<div style={{borderBottom:'1px solid #DDE3F1'}}>*/}
                {/*<InputItem*/}

                  {/*clear*/}
                  {/*placeholder="联系人"*/}
                  {/*value={contact}*/}
                  {/*onChange={(e) => {*/}
                    {/*this.setState({*/}
                      {/*contact: e*/}
                    {/*})*/}
                  {/*}}*/}
                {/*></InputItem>*/}
              {/*</div>*/}
            {/*</div>*/}
          </div>}

          <div style={{margin:'42px auto 36px',width:'85%',position:'relative'}}>
            <span style={{color:'#C0C4CC',fontSize:'13px'}}>
                <Checkbox onChange={this.onChangeBox} checked={this.state.checked}>
                  <span style={{position:'absolute',top:'0px',left:"26px"}}>
                  {messages.retailTitle17}
                  <span style={{color:'#FF9F00'}} onClick={this.privacyCusClick}>《&nbsp;{messages.retailTitle18}&nbsp;》</span>
                  </span>
                </Checkbox>
              </span>
          </div>
          <Button
            loading={this.state.loading}
            style={{background:'#F09600',borderRadius:'20px',border:'none',height:'42px',lineHeight:'42px',margin:'18px 0'}}
            type="primary"
            onClick={this.retailSureClick}
          >{messages.retailTitle19}</Button>
          <Modal
            visible={this.state.privacyModal}
            transparent
            maskClosable={false}
            width="98%"
            title={indexTitle==0?"Accordo di registrazione":"隐私政策"}
            className="privacy"
            footer={[{ text: 'Ok', onPress: () => {  this.onClose('privacyModal')(); } }]}
            wrapProps={{ onTouchStart: this.onWrapTouchStart }}
          >
            <div style={{ height: 400, overflow: 'scroll' }}>
              <div style={{textAlign:'left'}}>
                <div style={{ color:'#606266',fontSize:'14px' }}>
                  <div style={{padding:"16px",width:'100%',textAlign:'left'}}>
                    <p> INFORMATIVA AI SENSI DEL NUOVO REGOLAMENTO EUROPEO PRIVACY GDPR EU 2016/679

                      In  osservanza  a  quanto  disposto  dal  nuovo  Regolamento  Europeo  GDPR  EU

                      2016/679</p>
                    <p>in  materia  di  sicurezza  dei  dati  personali,  si  forniscono  le  seguenti

                      informazioni relative al trattamento de suoi dati indicati nel presente modello e si

                      mettono a conoscenza delle finalità per le quali sono trattati.</p>

                    <p> FINALITÀ DEL TRATTAMENTO</p>
                    <p> Il trattamento dei dati viene effettuato per: gestione della contabilità ed emissione</p>
                    <p>dei documenti contabili e rilascio VIPCARD MELA VERDE che dà diritto ad eventuali</p>
                    <p>sconti stabiliti ad insindacabile giudizio della direzione di MELA VERDE SRLS.</p>
                    <p>MODALITÀ DEL TRATTAMENTO</p>
                    <p>Il trattamento sarà effettuato con l’ausilio dei moderni sistemi informatici e in forma manuale, ad opera di “persone autorizzata”

                      a tal fine.</p>

                    <p>AMBITO DI COMUNICAZIONE E DIFFUSIONE</p>

                    <p> I suoi dati personali non saranno comunicati a terzi e non saranno in alcun modo oggetto di diffusione o comunicazione al di fuori

                      dell’azienda.</p>

                    <p>NATURA DEL CONFERIMENTO</p>

                    <p> Il conferimento dei dati è per lei necessario per l’assolvimento di obblighi contabili e  fiscali. L’eventuale non comunicazione, o

                      comunicazione errata, di una delle informazioni obbligatorie, avrà come conseguenza:</p>

                    <p> La  possibile mancata  corrispondenza  dei  risultati  del  trattamento  stesso  agli  obblighi  imposti  della  normativa  fiscale,

                      amministrativa o del lavoro cui esso è indirizzato.</p>

                    <p>Lei potrà far valere i propri diritti come espressi dagli artt. 13, 15, 16, 17 e 19 del GDPR EU 2016/679, rivolgendosi al “titolare del

                      trattamento”  di  MELA  VERDE  SRLS  sig.  Zheng  Weijun  attraverso  una  email  a  melaverde168@gmail.com  o  attraverso

                      raccomandata A/R indirizzata a MELA VERDE SRLS Responsabile Privacy sig. Zheng Weijun – Via Roma, 103 – 35040 Boara Pisani

                      (PD).</p>

                    <p>CONSENSO DELL’INTERESSATO</p>

                    <p>Il sottoscritto interessato, con la firma apposta in calce alla presente, attesta il proprio libero consenso affinché il titolare proceda
                      ai trattamenti dei propri dati personali come risultanti dalla presente scheda informativa e per i fini indicati alle voci sopraelencate,

                      riservandosi in qualsiasi momento di richiederne la cancellazione secondo quanto previsto dall’art. 17 del GDPR EU 2016/679. La

                      ditta conserverà esclusivamente NOME, COGNOME e CODICE FISCALE per mantenere lo storico degli ordini in caso di verifica di

                      eventuali pezzi o componenti di ricambio nel tempo. Qualsiasi altro dato, in virtù dell’art. 17 del GDPR EU 2016/679 sarà cancellato.</p>
                  </div>
                </div>

              </div>
            </div>

          </Modal>
        </div>
      </div >
      </IntlProvider>
    )
  }
}
